<template>
	<view class="contariner">
		<view class="score p-l-10" v-if="type == 2">评价分数<text class="number">{{score}}</text>分</view>
		<view :class="{'list':type == 1,'list2':type == 2}">
			<view class="item" v-for="(item,index) in questionList">
				<view class="title flex" :id="index">
					{{index + 1}}.  <text v-html="setText(item.examQuestionContent,item.examQuestionScore)"  class="html_text p-l-10"></text>
				</view>
				<view class="choice" v-if="item.examQuestionCate == '单选题'">
					<el-radio-group v-model="type == 1 && item.examSelectId"  text-color="#ff0000">
					    <el-radio :label="answer.id" v-for="answer in item.selectList">{{answer.name}}</el-radio>
					</el-radio-group>
					<el-radio-group v-model="type == 2 && item.sourceSelectList"  :disabled="true" text-color="#ff0000">
					    <el-radio :label="answer" v-for="answer in item.sourceSelectList">{{answer}}</el-radio>
					</el-radio-group>
					<block v-for="answer in item.selectList">
						<el-input v-if="answer.id == item.examSelectId && answer.canEmpty == 1" v-model="item.content" placeholder="请输入理由"></el-input>
					</block>
				</view>
				<view class="choice" v-if="item.examQuestionCate == '简答题'">
					<el-input type="textarea" :rows="3" :disabled="type == 2" v-model="item.content" placeholder="请输入"></el-input>
				</view>
				<view v-if="type == 2 && item.examQuestionCate == '单选题'">我的选择：
					<text style="color: red;">{{item.examSelectName}}</text>
					<div v-if="item.content">我的理由：<text style="color: red;">{{item.content}}</text></div>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="type == 1">
			<el-button type="primary" @click="showModel" style="width: 100%;">提交</el-button>
		</view>
		<view class="model bg-white padding-10" v-if="isShow">
			<view class="m-b-10">
				<i class="el-icon-warning f-30 darkorange"></i>
				<text class="wranText f-18 f-w-b p-l-10">温馨提醒</text>
			</view>
			<view class="redcolor f-15  m-b-10">
				{{isNoSubmit === true?'您还有未评价的题目，需要完成全部评论后才能提交！':
				'提交以后不能修改，确定提交吗？'}}
			</view>
			<view class="flex justify-between m-t-10 m-b-10">
				<view class="f-w-b">评价概况</view>
				<view>
					<text class="bg-green p-l-10 p-r-10 p-t-5 p-b-5 m-r-10 f-c-white" style="border: 1px solid #ccc;">已评</text>
					<text class="bg-red p-l-10 p-r-10 p-t-5 p-b-5 f-c-white">未评</text>
				</view>
			</view>
			<view class="divider"></view>
			<view class="answers flex flex-wrap">
				<view v-for="(item,index) in questionList" 
				:class="{'circle':true,'bg-green':true,'f-c-white':true,
				'noAnswer':(item.examQuestionCate == '单选题' && !item.examSelectId) || (item.examQuestionCate == '简答题' && !item.content),'bg-theme':activeIndex == index}" @click="jumpTo(item,index)">
					{{index + 1}}
				</view>
			</view>
			<view class="btn">
				<el-button v-if="isNoSubmit" @click="closeModel">继续评价</el-button>
				<el-button v-if="!isNoSubmit" @click="submitAnswer">提交</el-button>
			</view>
		</view>
		<view class="mask" v-if="isShow" @click="closeModel"></view>
	</view>
</template>

<script>
	const api = require('@/utils/api.js')
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				paperId:null,
				type:1,
				isShow:false,
				isNoSubmit:true,
				activeIndex:null,
				questionList:[],
				score:null,
				params: {
					courseId:null,
					examCourseId:null,
					detailList:[]
				}
			}
		},
		onLoad(options) {
			this.paperId = options.id
			this.type = options.type
			if (this.type == 2) {
				uni.setNavigationBarTitle({
					title: '详情'
				})
			}
			this.getList()
		},
		methods: {
			getList() {
				let api_url = this.type == 1?api.buildExam:api.getEvalute
				util.request(api_url,{id:this.paperId}).then(res=> {
					if(res.status == 200) {
						this.params.courseId = res.datas.courseId
						this.params.examCourseId = res.datas.examCourseId
						this.score = res.datas.score
						this.questionList = res.datas.detailList
					} else {
						util.toast(res.message)
					}
				})
			},
			 // 去除标签
			setText(html,score) {
				let str = html.replace(/<(p|div)[^>]*>(<br\/?>|&nbsp;)<\/\1>/gi, '\n')
				  .replace(/<br\/?>/gi, '\n')
				  .replace(/<[^>/]+>/g, '')
				  .replace(/(\n)?<\/([^>]+)>/g, '')
				  .replace(/\u00a0/g, ' ')
				  .replace(/&nbsp;/g, ' ')
				  .replace(/<img[^>]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>/g, '')
				  .replace(/<\/?(a)[^>]*>/g, '');  // 去除a标签
				if(score && score > 0) {
					str += '(' + score + '分)'
				}
				return str
			},
	
			showModel() {
				let isNoSubmit = false
				this.isShow = true
				this.questionList.map((item)=> {
					if((item.examQuestionCate == '单选题' && !item.examSelectId) || (item.examQuestionCate == '简答题' && !item.content)) {
						isNoSubmit = true
					}
				})
				if(!isNoSubmit) {
					this.isNoSubmit = false
				}
			},
			jumpTo(item,index) {
				// this.isShow = false
				this.activeIndex = index
				document.getElementById(index).scrollIntoView()
			},
			closeModel() {
				this.isShow = false
			},
 			submitAnswer() {
				this.questionList.map((item)=> {
					let obj = {
						content:item.content,
						examQuestionId:item.examQuestionId,
						examSelectId:item.examSelectId,
						id:item.id,
						selectList:item.examQuestionCate == '单选题'?[{id:item.examSelectId}]:[]
					}
					this.params.detailList.push(obj)
				})
				util.request(api.startEvalute,this.params).then(res=> {
					util.toast(res.message)
					if(res.status == 200) {
						uni.navigateBack()
					}
				})
			}
		}
	}
</script>

<style>
	.contariner {
		background-color: #fff;
		height:100%;
	}
	.list {
		height:calc(100% - 60px);
		overflow: scroll;
	}
	.list2 {
		height:calc(100% - 60px);
		overflow: scroll;
	}
	.html_text {
		font-size: 32rpx;
		line-height:60rpx;
	}
	/deep/ .html_text p{
		font-size: 32rpx;
		line-height:60rpx;
	}
	.score {
		height:60px;
		line-height: 60px;
		font-size: 50rpx;
		color: #03AEA4;
	}
	.number {
		color: #F9F441;
		font-size:60rpx;
		padding:0 20rpx;
		font-weight: bold;
	}
	.item {
		padding:20rpx;
		line-height:60rpx;
		margin-bottom: 40rpx;
	}
	.item .el-input {
		display:flex ;
	}
	.item .el-input::before {
		/* content: '*';
		color: red;
		padding-right:4rpx; */
	}
	.item .title {
		font-size: 34rpx;
	}
	/deep/ .el-radio {
		color: #000;
		font-size: 30rpx;
	}
	/deep/ .el-radio__label {
		font-size: 34rpx;
	}
	.bottom {
		width:80%;
		margin:0 auto;
		height:40px;
		line-height: 40px;
	}
	.el-radio-group {
		display: flex;
		flex-direction: column;
	}
	.el-radio {
		padding:20rpx 0;
	}
	.model {
		position:fixed;
		bottom: 0;
		width:100%;
		height:50%;
		background-color: #fff;
		z-index: 999;
		line-height: 60rpx;
		overflow: scroll;
	}
	.darkorange {
		color: darkorange;
	}
	
	.circle {
		width:80rpx;
		height:80rpx;
		padding:6rpx;
		margin:20rpx;
		margin-left: 0;
		border-radius: 50%;
		border: 1px solid #ccc;
		line-height: 70rpx;
		text-align: center;
	}
	.noAnswer {
		color: #fff;
		background-color: #FC544B;
	}
	.btn {
		margin: 60rpx;
		margin-top:100rpx;
	}
	.el-button {
		font-size:18px;
		color: #fff;
		background-color: #3B5FD5;
	}
	/deep/ .el-radio__input.is-checked+.el-radio__label{
		color: #3B5FD5;
	}
	/deep/ .el-radio__input.is-checked .el-radio__inner {
		border-color: #3B5FD5;
		background: #3B5FD5;
	}
	/deep/ .el-button--primary:focus, /deep/ .el-button--primary:hover,/deep/ .el-button--primary{
		background: #3B5FD5;
		border-color: #3B5FD5;
	}
</style>
